<template>
  <el-row class="container">
    <el-col :span="6" class="left-menu">
      <ul class="one-level-menu">
        <li v-for="(item,index) in menuLists" :key="index" @click="showTwoLeverMenu(index)" :class="{active:index==nowIndex}" class="one-level-list">
          <div class="one-menu-title">
            <span>{{item.title}}</span>
            <img :src='item.status?arrowBottom:arrowRight' alt="向右箭头">
          </div>
          <div v-if="item.status" class="two-lever-menu">
            <ul>
              <li v-for="(item,i) in item.content" :key="i" :data-id='item.id' @click.stop="showTwoLeverContent($event,i,index)" :class="{active:item.status}" class="two-menu-content">{{item.title}}</li>
            </ul>
          </div>
        </li>
      </ul>
    </el-col>
    <el-col :span="18">
      <router-view :rightContent = rightContent></router-view>
    </el-col>
  </el-row>
</template>

<script>
import Grayarrowright from "../../static/imgs/arrow-left-gray.png";
import Redarrowred from "../../static/imgs/arrow-bottom-red.png";

export default {
  data() {
    return {
      arrowRight: Grayarrowright,
      arrowBottom: Redarrowred,
      isActive: true,
      menuLists: [],
      nowIndex: 0,
      twoNowIndex: 0,
      rightContent: ""
    };
  },
  mounted() {
    this.getMenulist()
  },
  watch:{
      '$route':'getMenulist'
  },
  methods: {
    showTwoLeverMenu(index) {
      this.nowIndex = index;
      this.change2levelStatus(index, this.menuLists);
      //以下是一级列表无排他效果的代码
      // this.menuLists[index].status = !this.menuLists[index].status
      this.arrowState = Redarrowred;
    },
    showTwoLeverContent(e, i, index) { //点击帮助中心文章标题，渲染内容
      let helpId = e.target.getAttribute('data-id'); 
      this.change2levelStatus(i, this.menuLists[index].content);
      this.$router.push(`/helpCenter/${helpId}`);
    },
    change2levelStatus(index, arrLists) {
      let state;
      arrLists.forEach((item, key) => {
        state = item.status;
        if (index === key) {
          item.status = !state;
        } else {
          item.status = false;
        }
      });
    },
    getMenulist(){ //获取帮助中心左边菜单列表
      let helpID = this.$route.params.helpID;
      if(helpID == 0){
      this.axios
      .get("help/getObtainHelpList")
      .then(res => {
        if (res.data.status == 1) {
          this.menuLists = res.data.data;
          this.rightContent = this.menuLists[0].content[0].content;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
      }else{
        this.axios
          .get("help/getObtainHelpList?id="+helpID)
          .then(res => {
            if (res.data.status == 1) {
              this.menuLists = res.data.data;
              for(var i in this.menuLists){
                if(this.menuLists[i].status == 1){
                  this.nowIndex = this.menuLists[i].key;
                }
              }
              this.menuLists.forEach(el=>{
                el.content.forEach(e=>{
                  if(e.id == helpID){
                    this.rightContent = e.content;
                  }
                })
              });
            } else {
              this.log(res.data.message);
            }
          })
          .catch(err => {
            this.log(err);
          });
      }
    },
  }
};
</script>

<style lang="less">
@import url(../assets/css/helpCenter.less);
</style>